<template>
  <div class="sysrole-container">
    <!--    查询表单-->
    <Search :SearchConfig="SearchConfig" :searchData="searchData">
      <template #buttons>
        <ButtonGroup :ButtonConfig="ButtonConfig" @reset="reset" @query="query"/>
      </template>
    </Search>
    <!--    数据网格-->
    <div class="data-grid">
      <el-table
          :data="gridData"
          :highlight-current-row="true"
          @expand-change="handleExpandChange"
          row-key="roleId"
          :expand-row-keys="expandRowKeys"
          border
          height="520px"
          style="width: 100%">
        <el-table-column
            type="index"
            label="序号"
            width="50">
        </el-table-column>

        <el-table-column
            prop="roleCode"
            label="角色编码"
        >
        </el-table-column>

        <el-table-column
            prop="roleName"
            label="名称"
        >
        </el-table-column>

        <el-table-column type="expand" label="分配权限" width="70">
          <template slot-scope="props">
            <el-tree
                style="margin-left: 70px"
                :props="treeProps"
                :default-checked-keys="checkedKeys"
                :data="authTree"
                node-key="menuId"
                :check-strictly="true"
                ref="tree"
                show-checkbox>
            </el-tree>
            <div style="display: flex; justify-content: flex-end;margin-top: 15px;">
              <el-button type="primary" @click="updateAuth(props.row.roleId)" style="margin-right: 20px;width: 120px;">保存</el-button>
            </div>
          </template>
        </el-table-column>

        <el-table-column
            prop="remark"
            label="备注"
        >
        </el-table-column>

        <el-table-column
            prop="createUser"
            label="创建者"
        >
        </el-table-column>

        <el-table-column
            prop="createTime"
            label="创建时间"
        >
        </el-table-column>

        <el-table-column
            prop="updateTime"
            label="更新时间"
        >
        </el-table-column>

        <el-table-column
            label="启用"
        >
          <template slot-scope="scope">
            <el-switch
                @change="changeStatus(scope.row.roleId)"
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--    分页工具-->
    <page-comp :pageOptions="pageOptions"/>
  </div>
</template>

<script>
import PageComp from '@/components/pagination'
import Search from '@/components/search/index'
import ButtonGroup from '@/components/ButtonGroup'
import {list, changeStatus, getRoleHavAuths,dispatchAuth} from "@/api/sysroleApi";
import {getAuthTree} from "@/api/sysmenuApi";
import {SearchConfig, ButtonConfig} from "@/views/auth/sysrole.config";

export default {
  name: 'Role',
  components: {PageComp, Search, ButtonGroup},
  data() {
    return {
      pageOptions: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        pagesizes: [10, 20, 30, 40],
        sizeChangeCallback(pageSize) {
          this.pageSize = pageSize
        },
        currentChangeCallback(currPage) {
          this.currentPage = currPage
        }
      },
      gridData: [],
      searchData: {
        roleName: null,
      },
      SearchConfig,
      ButtonConfig,
      expandRowKeys: [],
      treeProps: {
        label: 'name',
        children: 'children'
      },
      authTree: [],
      checkedKeys: []
    }
  },
  watch: {
    'pageOptions.currentPage': function (ne, old) {
      this.query()
    },
    'pageOptions.pageSize': function (ne, old) {
      this.query()
    }
  },
  methods: {
    query() {
      list(this.searchData, this.pageOptions.currentPage, this.pageOptions.pageSize).then(success => {
        this.gridData = success.data
        this.pageOptions.total = success.total
      })
    },
    openDialog() {

    },
    reset() {
      this.searchData = {}
    },
    changeStatus(id) {
      changeStatus(id).then(success => {
        if (success) {
          this.query()
        }
      })
    },
    handleExpandChange(row, expandRows) {
      // 设置同时只能展开一行，否则Options就无法复用
      if (expandRows.length) {
        this.expandRowKeys = []
        this.expandRowKeys.push(row.roleId)

        getAuthTree().then(success => {
          this.authTree = []
          this.authTree = success
          getRoleHavAuths(row.roleId).then(success => {
            this.checkedKeys = []
            this.checkedKeys = success
          })
        })
      }
    },
    updateAuth(roleId) {
      dispatchAuth(roleId,this.$refs.tree.getCheckedKeys())
    }
  },
  mounted() {
    list().then(success => {
      this.gridData = success.data
      this.pageOptions.total = success.total
    })
  }
}
</script>

<style scoped>
.sysrole-container {
  position: relative;
  height: calc(100% - 31px);
}

.sysrole-container > .data-grid {
  box-sizing: border-box;
  padding: 0 20px 10px 20px;
}
</style>